import { getyAxis, getxAxis, getGrid, getColors } from './config/option'

// 多柱图
export function bar1(renderData, config) {
  // single = true 时 取只第一条数据
  if (config.single) {
    renderData = [renderData[0]]
  }
  const xAxis = renderData[0].data.map(item => item.name)
  const seriesData = renderData.map(item => {
    const values = item.data.map(item => item.value)
    const series = {
      name: item.legendName,
      type: 'bar',
      showBackground: false,
      barWidth: 8,
      data: values
    }
    // overlap = true 时，柱状图折叠
    if (config.overlap) {
      series.stack = 'bar'
    }
    if (config.single) {
      renderData = [renderData[0]]
    }
    return series
  })
  return {
    color: getColors(),
    grid: getGrid(),
    xAxis: getxAxis(xAxis),
    yAxis: getyAxis('人'),
    legend: {
      show: true,
      top: 10,
      right: 10,
      icon: 'rect',
      itemHeight: 5,
      textStyle: {
        color: '#fff',
        itemGap: 5
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params) => {
        let tooltip = `<strong>${params[0].name}</strong><br />`
        params.forEach(item => {
          tooltip += `${item.marker}${item.seriesName}: ${item.value}人 <br>`
        })
        return tooltip
      }
    },
    series: seriesData
  }
}
